<template>
    <v-dialog
    v-model="showMe"
    width="600px"
    @input="v=>v|closeMe()"
      >
        <v-card>
          <v-card-title><h4>{{ employee.name }}</h4></v-card-title>
          <v-divider></v-divider>
          <v-layout row>
          <v-flex sm6>
          
          <v-list dense>
            
            <v-list-tile>
              <v-list-tile-content>性别:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">{{ employee.gender?'女':'男' }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>出生:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">{{ employee.birth_date }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>所属部门:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">{{ employee.department.name }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>工作电话:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">{{ employee.work_phone }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>移动电话:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">{{ employee.mobile_phone }}</v-list-tile-content>
            </v-list-tile>
            
            
            

          </v-list>
          </v-flex>
          <v-flex sm6>
          <v-list dense>
            
            <v-list-tile>
              <v-list-tile-content>职称:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">{{ employee.title }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>岗位:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">{{ employee.position }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>家庭住址:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">云南省昆明市东风西路某某街某某小区具体位置</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>QQ:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">{{ employee.qq }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>电邮:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">{{ employee.email }}</v-list-tile-content>
            </v-list-tile>
            
            
            

          </v-list>

          </v-flex>
          </v-layout>

          <v-card-actions>
            <v-btn @click.stop="closeMe">关闭</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
</template>

<script>
//import {mapGetters} from 'vuex'

export default {
    name: 'employee-details-dialog',
    props: {
      employee: {
        type: Object,
        required: true
      },
      show: {
        type: Boolean,
        required: true
      }
    },

    watch: {
      show(v){
        this.showMe = v
      }
    },
    
    data(){
        return{
         
            showMe: false
        }
    },
    methods: {
      closeMe(){
        this.showMe = false;
        eventBus.$emit('employee-details-dialog-closed')
      }
    }

}
</script>

